<template>
    <div id="app">
        <el-container flex>
            <el-header>Header</el-header>
            <el-container class="inner-container">
                <el-aside width="250px">
                    <nav-vue></nav-vue>
                </el-aside>
                <el-main>
                    <test-observable v-show="isObs"></test-observable>
                    <test-listener v-show="isListener"></test-listener>
                    <test-component-tag v-show="isCom"></test-component-tag>
                    <test-render v-show="isRender"></test-render>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import NavVue from "./components/nav.vue";
import TestObservable from "./components/test-observable/test-observable.vue";
import TestListener from "./components/test-listener/test-listener.vue";
import testComponentTag from "./components/test-component-tag/test-component-tag.vue";
import dynamicCom1Vue from "./components/test-component-tag/dynamic-com1.vue";
import testRender from "./components/test-render/test-render.vue";
import observableNav from "./observable-nav.js";
export default {
    name: "App",
    components: { NavVue, TestObservable, TestListener, testComponentTag,testRender },
    data() { 
        return {
            dynamicCom1Vue: dynamicCom1Vue
        }
    },
    computed: {
        isObs() { 
            return observableNav.index == 1;
        },
        isListener() { 
            return observableNav.index == 2;
        },
        isCom() { 
            return observableNav.index == 3;
        },
        isRender() { 
            return observableNav.index == 4;
        }
    },
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
.el-header,
.el-footer {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
    height: 600px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: left;
}

body > .el-container {
    margin-bottom: 40px;
}

.inner-container {
    flex: 1;
}
</style>
